<template>
  <el-drawer
    title="保存原子指标"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer kpi-atom-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <el-form-item label="原子指标名称" prop="tagNm">
            <el-input v-model="editForm.tagNm" placeholder="请输入原子指标名称"></el-input>
          </el-form-item>
          <el-form-item label="度量单位" prop="unitMeasure">
            <el-input v-model="editForm.unitMeasure" placeholder="请输入度量单位，如个、只、元、次等"></el-input>
          </el-form-item>
          <el-form-item label="业务口径" prop="tagStory">
            <el-input
              placeholder="请输入业务口径"
              v-model="editForm.tagStory"
              type="textarea"
              :maxlength="1000"
              :rows="5"
              :show-word-limit="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据类型" prop="valueType">
            <el-select v-model="editForm.valueType" placeholder="请选择数据类型">
              <el-option label="---" value=""></el-option>
              <el-option label="浮点型" :value="1"></el-option>
              <el-option label="整型" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="更新频率" prop="execFrequency">
            <el-radio-group v-model="editForm.execFrequency">
              <el-radio v-for="item in $dictList('$exec_frequency')" :key="item.key" :label="item.key">
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="editForm.execFrequency">
            <el-form-item label="执行日期" prop="execDtList" v-if="editForm.execFrequency === 2" class="rate-form">
              <el-checkbox-group v-model="editForm.execDtList">
                <el-checkbox v-for="date in 31" :label="date" :key="date">{{ date }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="执行星期" prop="execWkList" v-if="editForm.execFrequency === 3" class="rate-form">
              <el-checkbox-group v-model="editForm.execWkList">
                <el-checkbox v-for="week in 7" :label="week" :key="week">{{ weekShow(week) }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="执行时间" prop="execTm">
              <el-col :span="12">
                <el-time-picker
                  v-model="editForm.execTm"
                  size="mini"
                  placeholder="执行时间"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </el-col>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose">取消</el-button>
      <el-button type="primary" size="medium" @click="save">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      editForm: {
        groupId: '',
        tagId: '',
        tagNm: '',
        tableNm: '',
        unitMeasure: '',
        tagStory: '',
        valueType: '',
        execFrequency: '',
        execDtList: [],
        execWkList: [],
        execTm: '',
        results: []
      },
      editFormRules: {
        tagNm: [{ required: true, message: '原子指标名称不能为空', trigger: 'blur' }],
        unitMeasure: [{ required: true, message: '度量单位不能为空', trigger: 'blur' }],
        tagStory: [{ required: true, message: '业务口径不能为空', trigger: 'blur' }],
        valueType: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
        execFrequency: [{ required: true, message: '更新频率不能为空', trigger: 'change' }],
        execDtList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execWkList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execTm: [{ required: true, message: '执行时间不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    weekShow(week) {
      let str = ''
      switch (week) {
        case 1:
          str = '日'
          break
        case 2:
          str = '一'
          break
        case 3:
          str = '二'
          break
        case 4:
          str = '三'
          break
        case 5:
          str = '四'
          break
        case 6:
          str = '五'
          break
        case 7:
          str = '六'
          break
      }
      return str
    },
    showDrawer(params) {
      this.editForm.groupId = params.groupId
      this.editForm.tagId = params.tagId
      this.editForm.tagNm = params.tagNm
      this.editForm.tableNm = params.tableNm
      this.editForm.tagStory = params.tagStory
      this.editForm.valueType = params.valueType
      this.editForm.dataLabs = params.dataLabs
      this.editForm.results = params.results
      this.editForm.unitMeasure = params.unitMeasure
      this.editForm.execFrequency = params.execFrequency
      this.editForm.execDtList = params.execDtList || []
      this.editForm.execWkList = params.execWkList || []
      this.editForm.execTm = params.execTm || ''
      this.drawerVisible = true
    },
    beforeClose() {
      this.editForm.groupId = ''
      this.editForm.tagId = ''
      this.editForm.tagNm = ''
      this.editForm.tableNm = ''
      this.editForm.tagStory = ''
      this.editForm.valueType = ''
      this.editForm.unitMeasure = ''
      this.editForm.execFrequency = ''
      this.editForm.execDtList = []
      this.editForm.execWkList = []
      this.editForm.execTm = ''
      this.editForm.dataLabs = []
      this.editForm.results = []
      this.drawerVisible = false
    },
    save() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let params = {
            tagId: this.editForm.tagId,
            tagConfigJson: JSON.stringify(this.editForm.dataLabs),
            previewResults: JSON.stringify(this.editForm.results),
            tagNm: this.editForm.tagNm,
            tableNm: this.editForm.tableNm,
            tagStory: this.editForm.tagStory,
            unitMeasure: this.editForm.unitMeasure,
            valueType: this.editForm.valueType,
            execFrequency: this.editForm.execFrequency,
            execDtList: this.editForm.execDtList,
            execWkList: this.editForm.execWkList,
            execTm: this.editForm.execTm
          }
          if (this.editForm.groupId) params.groupId = this.editForm.groupId
          this.$ajax({
            url: this.$ajax.setUrl('IndexAllocation/addAtomicIndex'),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$emit('callback', {
                tagId: this.editForm.tagId || data.data,
                tagNm: this.editForm.tagNm,
                tagStory: this.editForm.tagStory,
                valueType: this.editForm.valueType,
                unitMeasure: this.editForm.unitMeasure,
                execFrequency: this.editForm.execFrequency,
                execDtList: this.editForm.execDtList,
                execWkList: this.editForm.execWkList,
                execTm: this.editForm.execTm
              })
              this.beforeClose()
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss"></style>
